<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 组合标签 ： 多个标签以嵌套方式进行定义，实现最终的展示效果 -->
    <!-- 1. 有序列表 -->
    <ol>
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <!-- 1-数值序号  A|a-字符序号   I|i-罗马符合 -->
    <ol type="A">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <ol type="a">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <ol type="I">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <ol type="i">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <!--
        标签的 boolean 类型属性
            + h5 标签定义了该属性，表示使用该功能，未定义表示不使用该功能
            + h4 不存在boolean类型属性的定义语法，h4定义boolean类型属性的基本规则是 属性名="属性名"
    -->
    <ol type="i" reversed >
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <ol type="i" reversed start="10">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <ol type="1" start="10">
        <li>列表内容1</li>
        <li>列表内容2</li>
        <li>列表内容3</li>
        <li>列表内容4</li>
        <li>列表内容5</li>
        <li>列表内容6</li>
    </ol>
    <!-- 2. 无序列表 -->
    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
    <ul type="circle">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
    <ul type="square">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
    <!-- 3. 自定义列表 -->
    <dl>
        <dt>一段内容讲解:</dt>
        <dd>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</dd>

        <dt>二段内容讲解:</dt>
        <dd>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</dd>

        <dt>三段内容讲解:</dt>
        <dd>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</dd>
    </dl>

    <!-- 列表嵌套 - 无序自动调整标识符（循环使用） -->
    <ul>
        <li>
            主列表
            <ul>
                <li>子列表</li>
                <li>子列表</li>
            </ul>
        </li>
        <li>
            主列表
            <ol>
                <li>内容</li>
                <li>内容</li>
                <li>
                    内容
                    <ol>
                        <li>内容</li>
                        <li>内容</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>
            自定义列表
            <dl>
                <dt>标题</dt>
                <dd>内容</dd>
                <dt>标题</dt>
                <dd>内容</dd>
            </dl>
        </li>
    </ul>
    <dl>
        <dt>有序</dt>
        <dd>
            内容列表
            <ol>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </ol>
        </dd>
        <dt>无序</dt>
        <dd>
            内容列表
            <ul>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </ul>
        </dd>
    </dl>
</body>
</html>




